<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="贷款详情"
    width="800px"
  >
    <div class="loan-detail-content" v-if="loan">
      <!-- 基本信息 -->
      <div class="detail-section">
        <h4>基本信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">贷款编号：</span>
            <span class="value">#{{ loan.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">贷款金额：</span>
            <span class="value">¥{{ formatAmount(loan.amount) }}</span>
          </div>
          <div class="info-item">
            <span class="label">贷款期限：</span>
            <span class="value">{{ loan.loanTerm }}个月</span>
          </div>
          <div class="info-item">
            <span class="label">还款方式：</span>
            <span class="value">{{ getRepaymentMethodText(loan.repaymentMethod) }}</span>
          </div>
          <div class="info-item">
            <span class="label">贷款状态：</span>
            <span class="value">
              <el-tag :type="getLoanStatusType(loan.status)">
                {{ getLoanStatusText(loan.status) }}
              </el-tag>
            </span>
          </div>
          <div class="info-item">
            <span class="label">申请时间：</span>
            <span class="value">{{ formatDate(loan.createTime) }}</span>
          </div>
        </div>
      </div>

      <!-- 还款信息 -->
      <div class="detail-section" v-if="loan.status >= 2">
        <h4>还款信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">剩余本金：</span>
            <span class="value highlight">¥{{ formatAmount(loan.remainingPrincipal) }}</span>
          </div>
          <div class="info-item">
            <span class="label">已还本金：</span>
            <span class="value">¥{{ formatAmount(loan.paidPrincipal) }}</span>
          </div>
          <div class="info-item">
            <span class="label">已还利息：</span>
            <span class="value">¥{{ formatAmount(loan.paidInterest) }}</span>
          </div>
          <div class="info-item">
            <span class="label">年利率：</span>
            <span class="value">{{ formatRate(loan.interestRate) }}%</span>
          </div>
          <div class="info-item">
            <span class="label">放款时间：</span>
            <span class="value">{{ formatDate(loan.disbursementTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">到期时间：</span>
            <span class="value">{{ formatDate(loan.maturityTime) }}</span>
          </div>
        </div>
      </div>

      <!-- 贷款用途 -->
      <div class="detail-section" v-if="loan.purpose">
        <h4>贷款用途</h4>
        <p class="loan-purpose">{{ loan.purpose }}</p>
      </div>

      <!-- 审批信息 -->
      <div class="detail-section" v-if="loan.approvalRemark">
        <h4>审批信息</h4>
        <div class="approval-info">
          <div class="info-item">
            <span class="label">审批时间：</span>
            <span class="value">{{ formatDate(loan.approvalTime) }}</span>
          </div>
          <div class="info-item">
            <span class="label">审批意见：</span>
            <span class="value">{{ loan.approvalRemark }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="detail-placeholder" v-else>
      <el-icon class="placeholder-icon"><Document /></el-icon>
      <p>暂无详细信息</p>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { Document } from '@element-plus/icons-vue';

defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  loan: {
    type: Object,
    default: null
  }
});

defineEmits(['update:visible']);

// 工具函数
const formatAmount = (amount) => {
  if (amount === undefined || amount === null) return '0.00';
  return parseFloat(amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
};

const formatRate = (rate) => {
  if (rate === undefined || rate === null) return '0.00';
  return parseFloat(rate).toFixed(2);
};

const formatDate = (dateTime) => {
  if (!dateTime) return '-';
  const date = new Date(dateTime);
  return date.toLocaleDateString('zh-CN');
};

const getRepaymentMethodText = (method) => {
  const methodMap = {
    1: '等额本息',
    2: '等额本金',
    3: '一次性还本付息'
  };
  return methodMap[method] || '未知';
};

const getLoanStatusText = (status) => {
  const statusMap = {
    1: '审核中',
    2: '已批准',
    3: '还款中',
    4: '已结清',
    5: '已拒绝'
  };
  return statusMap[status] || '未知';
};

const getLoanStatusType = (status) => {
  const typeMap = {
    1: 'warning',
    2: 'success',
    3: 'info',
    4: 'success',
    5: 'danger'
  };
  return typeMap[status] || 'info';
};
</script>

<style scoped>
.loan-detail-content {
  padding: 8px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 8px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #f5f7fa;
}

.label {
  color: #909399;
  font-size: 14px;
}

.value {
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

.value.highlight {
  color: #e6a23c;
  font-weight: 600;
}

.loan-purpose {
  line-height: 1.6;
  color: #606266;
  font-size: 14px;
  margin: 0;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

.approval-info {
  background-color: #f0f9ff;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid #409eff;
}

/* 占位符样式 */
.detail-placeholder {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
}

.placeholder-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.detail-placeholder p {
  font-size: 16px;
  margin: 0;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>
